<!DOCTYPE HTML>
<html>
<head>
	<title>VeeTouch</title>
	<meta charset="utf-8" />
  	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
	<link rel="stylesheet" href="./css/jquery.mobile-1.0.css" /> 
    <link rel="stylesheet" href="./css/veetouch.css" /> 
	<script src="./js/jquery-1.7.1.min.js"></script>
	<script src="./js/jquery.mobile-1.0.min.js"></script>
    
    <script type="text/javascript" charset="utf-8">
        //Wait for PhoneGap to load
        document.addEventListener("deviceready", onDeviceReady, false);
        
        // PhoneGap is loaded and it is now safe to make calls PhoneGap methods
        function onDeviceReady() {
            checkConnection();
        }

        function checkConnection() {
            var networkState = navigator.network.connection.type;
            
            var states = {};
            states[Connection.UNKNOWN]  = 'Unknown connection';
            states[Connection.ETHERNET] = 'Ethernet connection';
            states[Connection.WIFI]     = 'WiFi connection';
            states[Connection.CELL_2G]  = 'Cell 2G connection';
            states[Connection.CELL_3G]  = 'Cell 3G connection';
            states[Connection.CELL_4G]  = 'Cell 4G connection';
            states[Connection.NONE]     = 'No network connection';

            alert('Connection type: ' + states[networkState]);
        }
    </script>
</head>
<body>
	<div data-role="page" id="home" data-theme="d">
		<!-- Header bar -->
		<div data-role="header" data-position="inline">
			<!-- Home button -->
			<h1>VeeTouch</h1>
  		</div>
  		
        <!-- Image Logo -->
        <div data-role="content" >
            <div style="text-align: center;">
                <!--
                                            <img src="./images/guide.jpg" align="middle"/>
                                           -->
      		</div>
        </div>
		
		<!-- Footer bar -->
		<div data-role="footer" data-position="fixed" data-theme="a" style="floa">
            <div class="nav-home" data-role="navbar" data-iconpos="top">
    			<ul>
                    <li><a id="photo"   href="photo.html"   data-ajax="false" data-icon="custom">Photo</a></li>
    				<li><a id="contact" href="contact.html" data-ajax="false" data-icon="custom">Contact</a></li>
                    <li><a id="link"    href="#" data-icon="custom">Link</a></li>
    			</ul>
    			<ul>
    				<li><a id="music"href="#" data-icon="custom">Music</a></li>
    				<li><a id="bill" href="#" data-icon="custom">Bill</a></li>
    				<li><a id="news" href="#" data-icon="custom">News</a></li>
    			</ul>
            </div>
            <h4>Notification</h4>
		</div>
	</div>
</body>
</html>